<template>
  <div>
    <div><MapContainer/></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  import MapContainer from "@/views/system/module/MapContainer.vue";
import {getInfo} from "@/api/login";

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {
    MapContainer
  },
  data() {
    return {
      cacheUserInfo: {}
    }
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    info() {
      getInfo().then(res => {
        if (res.code == 200) {
          this.cacheUserInfo.userId = res.data.user.userId;
          this.cacheUserInfo.deptId = res.data.user.deptId;
          this.cacheUserInfo.userName = res.data.user.userName;
          this.cacheUserInfo.nickName = res.data.user.nickName;
          this.cacheUserInfo.userType = res.data.user.userType;
          this.cacheUserInfo.avatar = res.data.user.avatar;
          this.cacheUserInfo.password = res.data.user.password;
          this.cacheUserInfo.status = res.data.user.status;
        }
      })
    },
    initWebSocket() {
      if (!window.WebSocket) {
        window.WebSocket = window.MozWebSocket;
      }

      if (window.WebSocket) {
        this.socket = new WebSocket("ws://127.0.0.1:9331");
        this.socket.onmessage = this.handleWebSocketMessage;
        this.socket.onclose = this.handleWebSocketClose;

        // 在socket连接打开后发送心跳请求
        this.socket.onopen = () => {
          console.log("WebSocket已成功连接！");

          if (this.socket.readyState === WebSocket.CONNECTING) {
          } else if (this.socket.readyState === WebSocket.OPEN) {
            this.setupHeartbeat();
            this.sendUserData();
          } else {
            console.log('WebSocket连接没有开启！');
            clearInterval(this.uuid);
            this.$message({
              message: 'Websocket连接没有开启！',
              type: 'warning'
            });
          }
        };

        // socket关闭
        this.socket.onclose = () => {
          console.log('WebSocket已关闭！');
          clearInterval(this.uuid);
        };
      } else {
        this.$message({
          message: '您的浏览器不支持WebSocket！',
          type: 'warning'
        });
      }
    },

    sendUserData() {
      let data = {
        type: 7,
        params: this.cacheUserInfo,
      };

      this.socket.send(JSON.stringify(data));
    },
    //传送经纬度
    sendPositioning(message) {
      this.socket.send(JSON.stringify(message));
    },
    setupHeartbeat() {
      clearInterval(this.uuid);
      this.uuid = setInterval(() => {
        if (this.socket.readyState === WebSocket.OPEN) {
          let heartbeatData = {
            type: 11,
            params: {},
          };
          this.socket.send(JSON.stringify(heartbeatData));
        } else {
          console.log('Websocket连接没有开启！');
          clearInterval(this.uuid);
        }
      }, 1000 * 25);
    },
    handleWebSocketMessage(event) {
      let json = JSON.parse(event.data);

      if (json.status == 200) {
        switch (json.type) {
          case 2:
            this.handleSingleMessage(json);
            break;
          case 4:
            this.handleCreateChatResponse(json);
            break;
          case 10:
            this.handleGroupMessageResponse(json);
            break;
          case 12:
            console.log("收到心跳检测回复");
            break;
          default:
            break;
        }
      } else {
        this.$message({
          message: '发送失败 对方不在线',
          type: 'warning'
        });
      }
    },
    handleWebSocketClose(event) {
      console.log('WebSocket已关闭！');
    },

  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.initWebSocket();
    this.info()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
